<template>
	<div class="personaldata">
		<div class="template" v-show="loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>个人资料</div>
			<div></div>
		</header>
		
		<div class="content">
			<div class="content_d">
				<div>个人头像</div>
				<div><img :src="userList.userHeadimg" class="userImg"><img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>
			</div>
		
			<div class="content_d" @click="userName">
				<div>昵称</div>
				<div>{{userList.userNickname}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>
			</div>
			<div class="content_d" @click="userName">
				<div>手机号</div>
				<div>{{userList.phone}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>
			</div>
			<div class="content_d">
				<div>生日</div>
				<div v-show='datashows' @click="birthday">{{userList.birth}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>
				<!--<div v-show='!datashows' @click="birthday">{{year}} {{month}} {{day}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>-->
			</div>
			<div class="content_d">
				<div>性别</div>
				<div @click="sexareabut">{{userList.sex}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>
				<!--<div @click="sexareabut" v-show='!sexshows'>{{sex}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>-->
			</div>
			<div class="content_d">
				<div>地区</div>
				<div @click="areabut">{{userList.city}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>
				<!--<div @click="areabut" v-show='!siteshow'>{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows"></div>-->
			</div>
			
			<div class="mask" v-show="maskcon">
				<div class="maskarea"></div>
				<mt-picker class="areainfo" :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
				<div class="maskbutcon">
					<div class="cancelbut" @click="cancelbut">取消</div>
					<div class="masksurebut" @click="surebut">确定</div>
				</div>
			</div>
			
			<div class="mask"  v-if='sexshow'>
				<div class="maskarea"></div>
				<mt-picker class="areainfo" :slots="sexList" @change="onsex"></mt-picker>
				<div class="maskbutcon">
					<div class="cancelbut" @click="sexcancelbut">取消</div>
					<div class="masksurebut" @click="sexsurebut">确定</div>
				</div>
			</div>
			
			<div class="mask" v-show='datashow'>
				<div class="maskarea"></div>
				<mt-picker class="areainfo" :slots="data" @change="onbirthday"></mt-picker>
				<div class="maskbutcon">
					<div class="cancelbut" @click="birthdaycancelbut">取消</div>
					<div class="masksurebut" @click="birthdaysurebut">确定</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Picker } from 'mint-ui';
	import myaddress from '../address/address3.json'
	import year from '../address/year.json'
	import monthandday from '../address/monthandday.json'
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				token:'',
				loading:true,
				userList:[],
				myAddressSlots: [{
						flex: 1,
						defaultIndex: 1,
						values: Object.keys(myaddress), //省份数组
						className: 'slot1',
						textAlign: 'center'
					}, {
						divider: true,
						content: '-',
						className: 'slot2'
					}, {
						flex: 1,
						values: [],
						className: 'slot3',
						textAlign: 'center'
					},
					{
						divider: true,
						content: '-',
						className: 'slot4'
					},
					{
						flex: 1,
						values: [],
						className: 'slot5',
						textAlign: 'center'
					}
				],
				myAddressProvince: '',//省
				myAddressCity: '',  //市
				myAddresscounty: '', //区/县
				maskcon: false,
//				siteshow:true,
				sexList:[
					{
						flex:1,
			          	values: ['男','女'],
			          	className: 'slot1',
			          	textAlign: 'center'
					}
				],
				sexshow:false,
//				sexshows:true,
				sex:'',
				data:[
					{
						flex:1,
			          	values: Object(year),
			          	className: 'slot1',
			          	textAlign: 'center'
					},
					{
						divider: true,
						content: '-',
						className: 'slot2'
					},
					{
						flex:1,
						defaultIndex: 1,
			          	values: Object.keys(monthandday),
			          	className: 'slot3',
			          	textAlign: 'center'
					},
					{
						divider: true,
						content: '-',
						className: 'slot4'
					},
					{
						flex: 1,
						values: [],
						className: 'slot5',
						textAlign: 'center'
					}
				],
				year:'',     //年
				month:'',    //月
				day:'',      //日
				datashow:false,
				datashows:true,
			}
		},
		components: {
			'mt-picker': Picker,
		},
		created(){
			this.token = localStorage.getItem('token');
			//用户信息
			var url = BaseUrl + 'users/info?appId=wap&token=' + this.token;
			this.$http.get(url).then(res=>{
//				console.log(res.data.data);
				if(res.data.code == '10000'){
					this.loading = false;
					this.userList = res.data.data;
				}else{
					this.loading = false;
				}
			}).catch(error=>{
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
		},
		methods:{
			//地址
			onMyAddressChange(picker, values) {
				if(myaddress[values[0]]) { //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
					picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
					picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
					this.myAddressProvince = values[0];
					this.myAddressCity = values[1];
					this.myAddresscounty = values[2];
				}
			},
			//性别
			onsex(picker, values) {
				this.sex = values[0];
			},
			//生日
			onbirthday(picker,values){
				if(monthandday[values[1]]){
					picker.setSlotValues(2, monthandday[values[1]]);
					this.year = values[0];
					this.month = values[1];
					this.day = values[2];
				}
			},
			//导航退后
			retreat:function(){
//				window.history.go(-1);
				this.$router.push({
					path:'/set'
				})
			},
			//修改名字
			userName:function(){
				this.$router.push({
					path:'/personaldatausername'
				})
			},
			//点击地址
			areabut: function() {

				this.maskcon = true;
			},
			//修改地址的取消
			cancelbut: function() {
				this.maskcon = false;
//				this.siteshow = true;
			},
			//修改地址的确定
			surebut: function() {
				this.maskcon = false;
//				this.siteshow =!this.siteshow;
				//修改地址
				var url =  BaseUrl + 'users/managecity?appId=wap&' + '&token=' + this.token + '&city=' + this.myAddressProvince + this.myAddressCity + this.myAddresscounty;
				this.$http.get(url).then(res=>{
//					console.log(res);
					if(res.data.code == '10000'){
						Toast({
							message: "修改成功",
							position: 'middle',
							duration: 3000
						})
						location.reload();
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//点击性别
			sexareabut:function(){
				this.sexshow = true;
			},
			//点击性别取消
			sexcancelbut:function(){
				this.sexshow = false;
//				this.sexshows = true;
			},
			//点击性别确定
			sexsurebut:function(){
				this.sexshow = false;
//				this.sexshows = !this.sexshows;
				var url = BaseUrl + 'users/managesex?appId=wap&token=' + this.token + '&sex=' + this.sex;
				this.$http.get(url).then(res=>{
//					console.log(res);
					if(res.data.code == '10000'){
						Toast({
							message: "修改成功",
							position: 'middle',
							duration: 3000
						})
						location.reload();
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//点击生日
			birthday:function(){
				this.datashow = true;
			},
			//点击生日取消
			birthdaycancelbut:function(){
				this.datashow = false;
				this.datashows = true;
			},
			//点击生日确定
			birthdaysurebut:function(){
				this.datashow = false;
				this.datashows = !this.datashows;
				var url = BaseUrl + 'users/managebirth?appId=wap&token=' + this.token + '&birth=' + this.year + this.month + this.day;
				this.$http.get(url).then(res=>{
//					console.log(res);
					if(res.data.code == '10000'){
						Toast({
							message: "修改成功",
							position: 'middle',
							duration: 3000
						})
						location.reload();
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}
		},
		mounted() {
			this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
				this.myAddressSlots[0].defaultIndex = 0;
				this.data[2].defaultIndex = 0;
				// 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
				//因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
			});
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.personaldata{
		background: #fff;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
		border-bottom: 1px solid #dcd2d1;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.content{
		border-top: #f2f2f2 solid 0.12rem;
		background: #fff;
		padding: 0 0.25rem;
	}
	.content_d{
		padding: 0.2rem 0;
		border-bottom: 1px solid #cccccc;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		color: #323232;
		letter-spacing: 1;
		font-size: 0.26rem;
	}
	.content_d div:nth-child(2){
		display: flex;
	}
	.userImg{
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
	}
	.rightArrows{
		width: 0.5rem;
		height: 0.4rem;
	}
</style>